<template>
  <div id="app">
    <!-- 头部 -->
    <header>
      <div class="hr_left">
        <a href="javascript:;">
          <img src="../img/logo.png">
        </a>
      </div>
      <ul>
        <li><a href="javascript:;">首页</a></li>
        <li><a href="javascript:;">产品中心</a></li>
        <li><a href="javascript:;">区块链</a></li>
        <li><a href="javascript:;">广告服务</a></li>
        <li><a href="javascript:;">开发能力</a></li>
        <li><a href="javascript:;">关于我们</a></li>
        <li><a href="javascript:;">投资者关系</a></li>
      </ul>
    </header>
    <!-- 中间 -->
    <main>
      <!-- banner -->
      <div class="ban">
        <div class="ban_txt">
          <a href="javascript:;" class="aa"></a>
          <a href="javascript:;" class="bb">迅 雷 1 1</a>
          <span>更 快 ！ 但 不 止 于 快 ！</span>
          <a href="javascript:;" class="cc">立即下载</a>
        </div>
        <ul>
          <li><a href="javascript:;"></a></li>
          <li><a href="javascript:;"></a></li>
          <li><a href="javascript:;"></a></li>
        </ul>
      </div>
      <!-- 更多 -->
      <div class="morem">
        <div class="more">
          <div class="mleft">
          <p>
            <a href="javascript:;" class="mla"></a>
            <a href="javascript:;" class="mlb">迅雷x</a>
            <a href="javascript:;" class="mlc">立即下载</a>
          </p>
        </div>
        <div class="mright">
          <p>
            <a href="javascript:;" class="mla"></a>
            <a href="javascript:;" class="mlb">迅雷影音</a>
            <a href="javascript:;" class="mlc">立即下载</a>
          </p>
        </div>
      </div>
        <div class="mmo">
          <a href="javascript:;" class="mmore">更多产品</a>
        </div>
      </div>
      <!-- 云 -->
      <div class="yun">
        <h2>共享计算与区块链</h2>
        <h3>迅雷是全球共享计算与区块链创领者，是中国拥有核心技术的分布式计算创新企业</h3>
        <div class="ytxt">
          <ul>
            <li>
              <a href="javascript:;">
                <div>
                  <h4>星域云</h4>
                <p>共享计算，链接无限</p>
                <i></i>
                <span>访问网站</span>
                </div>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <div>
                  <h4>网心云</h4>
                <p>共享闲置资源，开创共享计算新模式</p>
                <i></i>
                <span>访问网站</span>
                </div>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <div>
                  <h4>迅雷链开放平台</h4>
                <p>让区块链技术赋能于每一个开发者</p>
                <i></i>
                <span>访问网站</span>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!-- 招聘 -->
      <div class="zhao">
        <h2>迅雷招聘</h2>
        <div class="z_txt">
          <a href="javascript:;"><img src="https://www.xunlei.com/v2018/src/pc/images/home/home03/job01.jpg" alt=""></a>
        </div>
      </div>
    </main>
    <!-- 底部 -->
    <footer>
      <div class="ft_txt">
        <div class="ftop">
          <ul>
            <li><a href="javascript:;">产品中心</a></li>
            <li><a href="javascript:;">关于我们</a></li>
            <li><a href="javascript:;">联系我们</a></li>
            <li><a href="javascript:;">迅雷招聘</a></li>
            <li><a href="javascript:;">客服中心</a></li>
            <li><a href="javascript:;">迅雷论坛</a></li>
          </ul>
          <div>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
          </div>
        </div>
        <div class="fcen">
          <a href="javascript:;">增值电信业务粤B2-20050219号</a> |
          <a href="javascript:;">粤ICP备:B2-20050219号</a> |
          <a href="javascript:;">粤网文[2016]0901-125号</a> |
          <a href="javascript:;">互联网药品证书</a> |
          <a href="javascript:;">互联网出版(粤)字053号</a><br/>
          <a href="javascript:;">客服电话 400-1111-000</a> |
          <a href="javascript:;">违规不良信息举报电话 0755-86319951</a> |
          <a href="javascript:;">举报邮箱xljubao@xunlei.com</a><br/>
          <a href="javascript:;">用户协议</a> |
          <a href="javascript:;">隐私协议</a> |
          <a href="javascript:;">Copyright © 2003-2020 XUNLEI.COM All Rights Reserved</a>
        </div>
        <ul class="bto">
          <li>
            <a href="javascript:;">
              <i></i>
              工商网监
              <br/>
              电子标识
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <i></i>
              经营性网站
              <br/>
              备案信息
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <i></i>
              不良信息
              <br/>
              举报中心
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <i></i>
              网上有害信息
              <br/>
              举报专区              
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <i></i>
              粤公网安备<br/>
              44030502001761号
            </a>
          </li>
        </ul>
      </div>
    </footer>
  </div>
</template>

<style>
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
*{
  margin: 0;
  padding: 0;
}
ul,dl,ol{
  list-style: none;
}
a{
  text-decoration: none;
}
header{
  width: 100%;
  height: 64px;
  line-height: 64px;
  box-sizing: border-box;
  padding: 0 7.5%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .8);
  display: flex;
  justify-content: center;
}
.hr_left{
  width: 20%;
  height: 64px;
  float: left;
}
.hr_left a{
  display: block;
  margin-top: 14px;
  width: 78px;
  height: 37px;
}
.hr_left a img{
  width: 100%;
  height: 100%;
}
header ul{
  width: 80%;
  height: 64px;
  text-align: right;
}
header ul li{
  display: inline-block;
  margin-left: 30px;
  height: 61px;
}
header ul li a{
  padding: 0 10px;
  color: #ffffff;
  font-size: 14px;
}
header ul li:nth-child(1){
  
  border-bottom: 2px solid #ffffff;
}
header ul li:hover{
   border-bottom: 2px solid #ffffff;
}
main{
  width: 100%;
}
.ban{
  width: 100%;
  height: 660px;
  background: url(../img/ban.jpg)no-repeat;
  background-size: 100%;
  overflow: hidden;
}
.ban .ban_txt{
  width: 500px;
  height: 500px;
  margin: 0 auto;
  margin-top: 80px;
  background: url(../img/band.png)no-repeat;
  background-size: 100%;
  overflow: hidden;
}
.ban_txt a,.ban_txt span{
  display: block;
  text-align: center;
  color: #ffffff;
}
.aa{
  width: 100px;
  height: 100px;
  margin: 0 auto;
  margin-top: 78px;
  background: url(../img/banb.png)no-repeat;
  background-size: 360%;
}
.bb{
  width: 100%;
  height: 60px;
  line-height: 60px;
  font-size: 40px;
  color: #ffffff;
  font-weight: 400;
}
.ban_txt span{
  font-size: 16px;
  font-weight: lighter;
  margin: 8px 0;
  letter-spacing: 3px;
}
.cc{
  width: 140px;
  height: 40px;
  line-height: 40px;
  border-radius: 25px;
  margin: 0 auto;
  margin-top: 30px;
  border: 1px solid #ffffff;
}
.ban ul{
  width: 100%;
  height: 60px;
  text-align: center;
}
.ban ul li{
  display: inline-block;
  margin: 0 30px;
}
.ban ul li a{
  display: block;
  width: 60px;
  height: 60px;
  background: url(../img/banb.png)no-repeat;
  background-size: 307px;
}
.ban ul li:nth-child(1) a{
 background-position: -12px -10px;
}
.ban ul li:nth-child(2) a{
 background-position: -67px -170px;
}
.ban ul li:nth-child(3) a{
 background-position: -267px -105px;
}
.morem{
  width: 100%;
  height: 500px;
  background: #080325;
}
.more{
  width: 82%;
  height: 390px;
  margin: 0 auto;
  overflow: hidden;
}
.more div{
  width: 47%;
  height: 390px;
  float: left;
  border-radius: 22px;
  overflow: hidden;
}
.more div:nth-child(2){
  float: right;
}
.mleft{
  background: url(https://www.xunlei.com/v2018/src/pc/images/home/home01/product01.jpg)no-repeat;
  background-size: 100% 100%;
}
.more div.mright{
  float: right;
  background: url(https://www.xunlei.com/v2018/src/pc/images/home/home01/product03.jpg)no-repeat;
  background-size: 100% 100%;
}
.more div p{
  width: 100%;
  height: 232px;
  margin: 79px 0;
  text-align: center;
}
.more div p a{
  display: block;
}
.mla{
  width: 118px;
  height: 110px;
  background: url(https://www.xunlei.com/v2018/dist/spr_bannerTab.png?h=111749)no-repeat;
  background-position: 0 -330px;
  margin: 0 auto;
}
.mlb{
  width: 100%;
  height: 36px;
  line-height: 36px;
  font-size: 24px;
  color: #fefefe;
  margin-top: 5px;
}
.mlc{
  width: 196px;
  height: 50px;
  border-radius: 25px;
  border: 1px solid #ffffff;
  font-size: 18px;
  line-height: 50px;
  color: #ffffff;
  margin: 30px auto 0;
}
.mlc:hover,a.cc:hover,.mmore:hover,.ytxt ul li div span:hover{
  background: rgba(225,225,225,0.3);
}
.mright .mla{
  background-position-x: -123px;
}
.mmo{
  width: 100%;
  height: 56px;
  margin-top: 52px;
  float: left;
}
.mmore{
  display: block;
  width: 194px;
  height: 54px;
  border-radius: 25px;
  border: 1px solid #ffffff;
  font-size: 18px;
  line-height: 54px;
  color: #ffffff;
  margin: 0px auto;
  text-align: center;
}
.yun{
  width: 100%;
  height: 721px;
  background: #080325;
  overflow: hidden;
  text-align: center;
  color: #ffffff;
}
.yun h2{
  width: 100%;
  height: 66px;
  line-height: 66px;
  font-size: 44px;
  font-weight: lighter;
  margin-top: 90px;
}
.yun h3{
  width: 100%;
  height: 33px;
  line-height: 33px;
  font-size: 22px;
  font-weight: lighter;
  margin-top: 30px;
}
.ytxt{
  width: 100%;
  height: 450px;
  background: url(https://www.xunlei.com/v2018/src/pc/images/home/home02/onething.jpg)no-repeat;
  margin-top: 52px;
  background-size: 100% 100%;
}
.ytxt ul{
  width: 82%;
  height: 400px;
  margin: 25px auto;
}
.ytxt ul li{
  width: 32.5%;
  height: 400px;
  background: rgba(45, 56, 223, .4);
  border-radius: 20px;
  float: left;
}
.ytxt ul li:hover{
  background: rgba(45, 56, 223, .8);
  transition: all 1s;
}
.ytxt ul li:hover p{
display: none;
}
.ytxt ul li:hover span{
display: block;
}
.ytxt ul li:nth-child(2){
  margin: 0 1.25%;
}
.ytxt ul li a{
  display: block;
  width: 100%;
  height: 100%;
  color: #ffffff;
  overflow: hidden;
}
.ytxt ul li div{
  width: 100%;
  height: 200px;
  margin: 100px 0;
}
.ytxt ul li div h4{
  width: 100%;
  height: 42px;
  line-height: 42px;
  font-size: 28px;
}
.ytxt ul li div p{
  width: 100%;
  height: 27px;
  line-height: 27px;
  font-size: 18px;
  margin-top: 17px;
}
.ytxt ul li div i{
  display: block;
  width: 152px;
  height: 90px;
  margin: 19px auto 0;
  background: url(https://www.xunlei.com/v2018/dist/spr_bannerTab.png?h=111749)no-repeat;
  background-position: -330px -95px;
}
.ytxt ul li div span{
  display: block;
  width: 165px;
  height: 46px;
  line-height: 46px;
  border-radius: 22px;
  border: 1px solid #ffffff;
  margin: 52px auto 0;
  display: none;
}
.ytxt ul li:nth-child(2) div i{
  background-position: -165px -165px;
}
.ytxt ul li:nth-child(3) div i{
  background-position: -330px 0px;
}
.zhao{
  width: 100%;
  height: 498px;
  box-sizing: border-box;
  padding-top: 90px;
  background: #080325;
}
.zhao h2{
  width: 100%;
  height: 66px;
  line-height: 66px;
  color: #ffffff;
  font-size: 44px;
  font-weight: lighter;
  text-align: center;
}
.z_txt{
  width: 82%;
  height: 256px;
  margin: 40px auto;
}
.z_txt a,.z_txt a img{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
footer{
  width: 100%;
  height: 308px;
  background: #000000;
  box-sizing: border-box;
  padding: 36px 9% 60px;
}
footer a:hover{
  text-decoration: underline;
}
.ft_txt{
  width: 100%;
  height: 100%;
}
.ftop{
  width: 100%;
  height: 57px;
  border-bottom: 1px solid #333333;
}
.ftop ul{
  width: 50%;
  height: 41px;
  line-height: 41px;
  padding-bottom: 16px;
  float: left;
}
.ftop ul li{
  float: left;
  width: 16.6%;
}
.ftop ul li a{
  color: #ffffff;
  font-size: 14px;
}
.ftop div{
  width: 10%;
  float: right;
  height: 22px;
  margin-top: 14px;
}
.ftop div a{
  display: block;
  float: left;
  width: 21px;
  height: 17px;
  background: url(https://www.xunlei.com/v2018/dist/spr_common.png?h=26ef6d)no-repeat;
  margin-left:30%;
}
.ftop div a:nth-child(1){
  background-position: -195px -141px;
} 
.ftop div a:nth-child(2){
  background-position: -225px -176px;
}
.fcen{
  width: 100%;
  height: 63px;
  padding-top: 24px;
  margin-bottom: 26px;
  font-size: 12px;
  color: #999999;
  line-height: 21px;
}
.fcen a{
  font-size: 12px;
  color: #999999;
  padding: 0 3px;
}
ul.bto{
  width: 100%;
  height: 36px;
}
ul.bto li{
  padding: 0 60px;
  border-left: 1px solid #999999;
  float: left;
}
ul.bto li a{
  font-size: 12px;
  color: #999999;

}
ul.bto li:nth-child(5) a{
  display: inline-block;
  width: 154px;
  text-align: center;
}
ul.bto li:nth-child(1){
  padding-left: 0;
  border-left: 0;
}
ul.bto li i{
  display: block;
  width: 40px;
  height: 38px;
  background: url(https://www.xunlei.com/v2018/dist/spr_common.png?h=26ef6d)no-repeat;
  background-position-y: -177px;
  float: left;
}
ul.bto li:nth-child(1) i{
  background-position-x: 0px;
}
ul.bto li:nth-child(2) i{
  background-position-x: -45px;
}
ul.bto li:nth-child(3) i{
  background-position-x: -90px;
}
ul.bto li:nth-child(4) i{
  background-position-x: -135px;
}
ul.bto li:nth-child(5) i{
  background-position-x: -180px;
}
</style>
